import type { ToolbarProps } from './types'
import { ThemeVarService } from '../../lib/abstract/style/theme_var/service'
import { PROJECT_PREFIX } from '../../types/constants'

/**
 * 获取工具栏样式
 */
export function styles(className: string, props: Partial<ToolbarProps>) {
  const direction = props.direction === 'vertical' ? 'column' : 'row'

  return `
    .${className} {
      all: initial;
    }
  
    .toolbar {
      display: inline-flex;
      flex-direction: ${direction};
      gap: 8px;
      z-index: 100;
      margin: 10px 0;
      justify-content: var(--toolbar-position);
      max-width: 100%;
      width: max-content; /* 宽度由内容决定 */
      height: 40px;
    }

    .toolbar-menu {
      position: relative;
    }

    .toolbar-menu-button {
      position: relative !important;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 28px 8px 12px;
      min-height: 32px;
      line-height: normal !important;
      border-radius: 4px;
      background: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
      color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
      border: 1px solid var(--${PROJECT_PREFIX}-theme-border-neutral) !important;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      
      &:hover {
         background-color: var(--${PROJECT_PREFIX}-theme-select-active-bg) !important;
      }
      &.active {
         background-color: var(--${PROJECT_PREFIX}-theme-select-active-bg) !important;
         color: var(${ThemeVarService.getInstance().link.default.text}) !important;
         
         .toolbar-icon {
            transform: rotate(180deg);
         }
      }
      &.disabled {
         opacity: 0.5;
         cursor: not-allowed;
      }

    .toolbar-icon {
        position: absolute !important;
        display: inline-flex;
        align-items: center;
        right: 4px;
        width: 16px;
        height: 16px;
      }
    }

    .toolbar-submenu {
      position: absolute;
      ${props.direction === 'vertical' ? 'left: 100%; top: 0;' : 'top: 100%; left: 0;'}
      min-width: 100%;
      width: max-content;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      padding: 8px 0;
      opacity: 0;
      visibility: hidden;
      z-index: 110;
      color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
      background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
      border: 1px solid var(--${PROJECT_PREFIX}-theme-code-toolbar-divider) !important;
      max-height: 400px;
      overflow-y: auto;
    }

    .toolbar-menu.active .toolbar-submenu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .toolbar-submenu-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
      cursor: pointer;
      user-select: none !important;
      &:hover {
        background-color: var(--${PROJECT_PREFIX}-theme-toolbar-button-bg-hover) !important;
        color: var(--${PROJECT_PREFIX}-theme-toolbar-button-text) !important;
      }
      .submenu-icon {
        font-size: 16px;
        flex-shrink: 0;
      }
      .submenu-name {
        font-size: 14px;
      }
    }
    
    /* 原生title美化（仅限WebKit） */
    .toolbar-submenu-item[title] {
      position: relative;
      cursor: help;
    }
    
    .toolbar-submenu-item.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .toolbar-submenu-item.deactivate {
      display: none !important;
    }
  `
}
